<template>
	<view class="white_bg">
		<mescroll-uni :height="height + 'px'"  ref="mescrollRef" @init="mescrollInit"  :down="downOptions" :up="upOptions"   @up="upBack">

			<view style="height: 2px;"></view>

			<view v-if="dataList.length > 0">
				<view class="article_item grey_border" v-for="(item, index) in dataList" :key="index"  :data="item">

					 <!-- 发帖人信息 -->
					 <view @click="gotoArticle(item.id)">
						<poster-info :data="item" :show-follow-btn="false" :disable-to-home="false"></poster-info>
					 </view>


					<!-- 内容 -->
					<view @click="gotoArticle(item.id)">
						<!-- <text class="article_topic">#你喜欢那个明显#</text> -->

						<text-overflow :dt="item.content" style="padding: 8px 0;"></text-overflow>

						<!-- 图片、视频 -->
						<file-list :dataList="item.fileList" @video_play="videoPlayBack"></file-list>
					</view>

					<!-- 话题 -->
					<view class="topc_name"># {{item.topicInfo.name}}</view>


					<view class="foot_info">分享  ·  {{item.replyCount}} 评论  ·  {{item.likeCount}} 赞</view>
				</view>
			</view>


			<no-data v-else  :height="height" icon="/static/bg/cat_qz.png" :iconMarginTop="100">
			</no-data>

			<!-- 消息提示 -->
			<u-toast ref="uToast"></u-toast>

		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import TextOverflow from "@/components/textOverflow.vue";
	import FileList from "@/components/file/fileList.vue";
	import PosterInfo from "@/components/article/posterInfo.vue";
	import NoData from "@/components/noTips/noData.vue"
	export default {
		props: {
			// mescroll的高度
			height: [Number, String],
			// 是否禁止滚动, 默认false
			disableScroll: Boolean,
		},
		mixins: [MescrollMixin,MescrollMoreItemMixin],
		components:{
			TextOverflow,
			PosterInfo,
			FileList,
			NoData
		},
		data() {
			return {
				downOptions: {
					use: false,
				},
				// 上拉加载的配置参数
				upOptions: {
					use: true,
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 4,
					// 空数据提示
					empty: {
						tip: '~ 空空如也 ~',
						btnText: '去看看'
					},
					toTop: {
						src: ''
					}
				},
				// 是否已加载过数据
				isLoaded: false,
				// 当前页
				currentPage: 1,
				// 分页大小
				pageSize: 10,
				// 数据
				dataList: [],
				// 没有更多了
				noMore: false,
				// 数据加载中
				loading: false,
			}
		},
		created() {
			this.isLoaded = false
		},
		methods: {
			initData(){
				if(this.isLoaded){
					return
				}
				this.currentPage = 1
				this.pageSize = 12
				this.getArticleList()
			},
			// 前往详情
			gotoArticle(id){
				uni.navigateTo({
					url: '/pages/article/article?id='+id
				})
			},
			// 视频播放
			videoPlayBack(url){
				this.$emit('video_play',url)
			},
			// 获取列表数据
			getArticleList(){
				let form = {
					page: this.currentPage,
					size: this.pageSize
				}
				this.isLoaded = true
				this.loading = true
				this.$httpApi.baseArticleGet('user/article/like',form).then(({ data }) => {
					this.loading = false
					if (data.code == "000000") {
						this.dataList =  data.data.records
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 加载更多
			getMoreList(){
				if(this.loading || this.noMore){
					return
				}
				let form = {
					page: this.currentPage + 1,
					size: this.pageSize
				}
				this.loading = true
				this.$httpApi.baseArticleGet('user/article/like',form).then(({ data }) => {
					this.loading = false
					if (data.code == "000000") {
						if(data.data.records && data.data.records.length > 0){
							this.currentPage += 1
							this.dataList = [...this.dataList, ...data.data.records];
						}
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 上拉加载的回调
			upBack(page) {
				if (!this.loading && !this.noMore) {
					this.getMoreList()
				}else{
					this.mescroll.endErr()
				}
			},

		}
	}
</script>

<style scoped lang="less">
.topc_name{
	padding: 5px 0;
	color: #057eff;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.foot_info{
	font-size: 14px;
	color: #bdbdbd;
	padding: 5px 0;
}
</style>
